<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/agent/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/agent/css/shenpi.css"/>
    <script type="text/javascript" src="/agent/js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="/agent/js/rem.js" ></script>
    <script type="text/javascript" src="/agent/js/swiper.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/agent/css/swiper-3.4.2.min.css" />
    <title>我审批的</title>
</head>
<script>
  $(function() {
    var winHeight = $(window).height();
    $(".mask").css("height", winHeight);
    $(".mask .container").css("margin-top", winHeight / 3);
    $(".tupian .swiper-slide").click(function(){
      $(".mask").show();
    });
    $(".cha").click(function(){
      $(".mask").hide();
      window.location.reload();
    });
  });
</script>
<body>
<div class="top">
    <img src="{$userinfo.avatar}"/>
    <span>{$agent.dep_text}</span>
    <span class="ing">{$order.status_text}</span>
</div>
<!--订单列表-->
<div class="order_list">
    <h2>
        <span>订货单号：{$order.nb}</span>
    </h2>
    {volist name="orderItem" id="vo"}
    <div class="order_list_goods">
        <dl>
            <dt>
                <img src="{$vo.preproductimg_text}">
            </dt>
            <dd class="name">
                <strong>{$vo.preproductname_text}</strong>

            </dd>
            <dd class="pice">￥{$vo.unit_price}<em>x{$vo.num}</em></dd>
        </dl>
    </div>
    {/volist}
</div>
<!--付款凭证-->
<div class="pay">
    {if $order.image}
        <h2>付款凭证</h2>
        <div class="container pay_img">
            <div class="swiper-container swiper1">
                <div class="swiper-wrapper">
                    {volist name="$order.image" id="vo"}
                        <div class="swiper-slide">
                            <img src="/agent/upload/{$vo}"/>
                        </div>
                    {/volist}
                </div>
            </div>
        </div>
    {/if}
    <p>共{:count($orderItem)}件商品&nbsp;&nbsp;&nbsp;合计：<span style="color: #f3494c;">¥{$order.order_price}</span></p>
</div>
<!--收货地址-->
<div class="shou">
    <h2><img class="dizhi" src="/agent/img/address.png"/>&nbsp;收货地址</h2>
    <div class="name2">
        收货人：{$agent.warehouse.name} &nbsp;&nbsp;&nbsp;
        <a href="tel:{$agent.warehouse.tel}">{$agent.warehouse.tel}</a>
    </div>
    <div class="address">
        
        <p>收货地址：{$agent.warehouse.province_text}{$agent.warehouse.city_text}{$agent.warehouse.area_text}{$agent.warehouse.address}</p>
    </div>
</div>
<!--审批流程-->
<div class="liucheng">
    <h2>审批流程</h2>
    <ul>
        {volist name="$order.log" id="vo"}
        <li>
            <div class="left-border">
                <i class="second first"></i>
            </div>
            <div class="shen-left">
              <div class="shen-info">
                <img src="{$vo.avatar}"/> 
                <em class="agent-name">{$vo.username}</em>
                	<em class="agree" style="color: #2abf40;color: #f3494c; "><em style="color: #888;">·{$vo.action}</em></em>
              </div>
                {if $vo.content}
                    <p class="shen-beizhu">“{$vo.content}”</p>
                {/if}
                
            </div>
            <span>{:date('m/d  H:i',$vo['createtime'])}</span>
        </li>
        {/volist}
        <li>
            <div style="height: 0.2rem;margin-left: -1px;"><i class="third"></i></div>
            <img src="{$admin->avatar}"/> {$admin->username}•审批中
            <span></span>
        </li>
    </ul>
</div>
  <!--审批意见-->
  <form action="{:url('do_check_save')}" method="post" name="form" id="forms">
      <input type="hidden" value="{$order.id}" name="orderID"> 
      <div class="ideas">
          <h2>审批意见</h2>
          <textarea name="content" datatype="*" placeholder="请输入…"></textarea> <!--同意必须-->
      </div>
      <input id='submit_to_save' name='submit_to_save' value='' type='hidden'>
      <input  name='art' value='' type='hidden'><!--同意必须-->
      <div class="button2">
          <div class="agree" id='nexbton' onclick='tj("ok")' >同意</div>
          <input type="hidden" name="wf_backflow" value="0">
         <div class="bohui" id='backbton' onclick='tj("no")'value='back' >驳回</div>
       
      </div>
  </form>
<!--Swiper-->
<div class="swiper-container myswiper" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload"></div>
</div>
<script>

    //同意 驳回
    function tj(val) {
      $('#submit_to_save').val(val);
      if(val == 'no')
      {
        if($('#check_con').val() == '')
        {
          alert('请添加驳回理由');
          return false;
        }
      }
      $('#forms').submit();
    }
  //点击图片变大
  //判断图片是否为放大状态 放大是true 否则为false
  var swiperStatus = false;
  var swiper = new Swiper('.myswiper', {
    zoom: true,
    width: window.innerWidth,
    virtual: true,
    spaceBetween: 20,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
    },
    on: {
      //放大后轮播图点击
      click: function() {
        //遮罩层消失
        $('#origin-img').fadeOut('fast');
        //清空遮罩层的内容
        this.virtual.slides.length = 0;
        this.virtual.cache = [];
        //标记为未放大状态
        swiperStatus = false;
      },
    },
  });
  //点击页面中轮播图图片
  $(document).delegate(".swiper1 img", "click", function() {
    //获取到当前点击的是第几张图片
    clickIndex = $(this).parent().index();
    //获取图片的外层div,因为外层轮播的图片循环的是这个div
    var imglist = $(this).parents(".swiper1").find(".swiper-slide")
    $(imglist).each(function(i, v) {
      console.log($(v).find("img").attr("src"))
      //获取当前点击图片的图片地址
      var imgs = $(v).find("img").attr("src")
      //将图片地址画入swiper中
      swiper.virtual.appendSlide('<div style="background:#000;" class="swiper-zoom-container"><img src="' + imgs + '" /><div class="cha">×</div></div>');
    })
    //根据当前点击的图片位置让放大的图片定位到第几张图片
    swiper.slideTo(clickIndex);
    //遮罩层弹出
    $('#origin-img').fadeIn('fast');
    //标记为放大状态
    swiperStatus = true;
  });
  //切换图状态禁止页面缩放
  document.addEventListener('touchstart', function(event) {
    if(event.touches.length > 1 && swiperStatus) {
      event.preventDefault();
    }
  });
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if(now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false)
  document.addEventListener('touchmove', function(e) {
    if(swiperStatus) {
      e.preventDefault();
    }
  });
</script>
</body>
</html>
